<template>
<div v-loading="loading">
    <div>实际加班维护</div>
    <form>
        <div style="margin-top:20px;">
                <div style="float:left;">
                    <span>用户姓名:</span>
                    <el-input
                        placeholder="请输入用户姓名，支持模糊查询"
                        style="margin: 0px;padding:0px;width:300px"
                        size="mini"
                        v-model="user_name">
                    </el-input>
                </div>
                <div style="float:left;margin-left:5px">
                    <span>加班状态:</span>
                    <el-select v-model="result_status" clearable placeholder="请选择" size="mini" style="width:300px">
                        <el-option
                            v-for="item in statusList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div style="float:left;margin-left:5px">
                    <span>事后信息:</span>
                    <el-select v-model="message_sign" clearable placeholder="请选择" size="mini" style="width:300px">
                        <el-option
                            v-for="item in signList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>   
        </div>
    </form>
    <div style="margin-top:65px">
            <el-button size="mini" @click="prepareQuery" type="primary">查询</el-button>
            <el-button size="mini" @click="fnReset" type="primary">重置</el-button>
    </div>
    <div>
        <div style="margin-top: 20px;float:left;margin-left:15px">
            <div style="margin-top:20px">
                <!-- <el-button size="mini" @click="dialogVisible = true" icon="el-icon-plus" type="primary">新增</el-button> -->
                <!-- <el-button size="mini" @click="fnDel" icon="el-icon-delete" type="danger">删除</el-button> -->
            </div>
        </div>
        <div id="show-list" style="margin-top: 10px">
            <el-dialog :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%"
                @close="closeDialog"
                v-loading="formLoading">
                <el-form label-width="80px" ref="editForm">
                    <el-input size="mini" style="width: 300px" v-model="application_id_form" placeholder="请输入主键" v-if="false"></el-input>
                     <div style="margin-top:5px">
                        <span>工作日加班:</span><el-input v-model="workday" size="mini" style="width:50px"></el-input><span>天</span>
                        <span>周末加班:</span><el-input v-model="weekend" size="mini" style="width:50px"></el-input><span>天</span>
                        <span>节假日加班:</span><el-input v-model="holiday" size="mini" style="width:50px"></el-input><span>天</span>
                    </div>
                    <div style="margin-top:5px;margin-left:-34px">
                        <span style="color:red">*</span><span>实际加班时间:</span>
                        <el-date-picker
                            size="mini"
                            v-model="result_time"
                            type="daterange"
                            style="width:300px"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="center">
                        </el-date-picker>
                    </div>
                    <div style="margin-top:5px;margin-left:-54px">
                        <span style="color:red">*</span><span>实际加班天数(/d):</span>
                        <el-input autosize :rows="3" placeholder="请输入实际加班天数" v-model="result_time_day" size="mini" style="width:300px" type="number"></el-input>
                    </div>
                    <div style="margin-top:5px;margin-left:-34px">
                        <span style="color:red">*</span><span>是否产生经费:</span>
                        <el-select size="mini" placeholder="请选择"  v-model="is_result_fee" style="width:300px" readonly>
                            <el-option
                                v-for="item in allStatus"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>

                        </el-select>
                    </div>
                    <div style="margin-top:5px;margin-left:-34px">
                        <span style="color:red">*</span><span>是否结束加班:</span>
                        <el-select size="mini" placeholder="请选择"  v-model="result_status_form" style="width:300px" readonly>
                            <el-option
                                v-for="item in allResultStatus"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>

                        </el-select>
                    </div>
                    <div style="margin-top:5px">
                        <span>部门名称:</span>
                        <el-input v-model="department_id_form" style="width: 300px" placeholder="请选择部门" :disabled="true" size="mini" >
                            
                        </el-input>
                    </div>
                    <div style="margin-top:5px;">
                        <span>项目名称:</span>
                        <el-input size="mini" style="width: 300px;" v-model="project_id_form" placeholder="请输入项目名称..." :disabled="true"></el-input>
                    </div>
                    <div>
                        <span>用户姓名:</span>
                        <el-input v-model="user_name_form" placeholder="请选择" size="mini" style="width:300px;margin-top:5px" :disabled="true">
                        </el-input>
                        <el-input v-model="user_id_form" v-if="false"></el-input>
                    </div>
                    <!-- <div>
                        <span>审核级别:</span>
                        <el-input v-model="audit_level_id_form" clearable placeholder="请选择" size="mini" style="width:300px;margin-top:5px" readonly>
                        </el-input>
                    </div> -->
                   <div style="margin-left:-29px">
                        <span class="demonstration">加班申请时间:</span>
                        <el-input
                                size="mini"
                                v-model="application_time_form"
                                type="daterange"
                                style="width:300px;margin-top:5px"
                                align="right" :disabled="true"> 
                        </el-input>
                    </div>
                    <!-- <div style="margin-left:-29px">
                        <span class="demonstration">预计加班时间:</span>
                        <el-input
                                size="mini"
                                v-model="application_start_time_form"
                                type="daterange"
                                style="width:300px;margin-top:5px"
                                align="right" :disabled="true"> 
                        </el-input>
                    </div> -->
                    
                    <!-- <div>
                        <span>加班状态:</span>
                        <el-input v-model="application_type_form" style="width: 300px;margin-top:5px" placeholder="加班类型" size="mini" readonly>
                        </el-input>
                    </div> -->
                    
                    <div style="margin-top:5px;">
                        <span>加班地点:</span>
                        <el-input size="mini" style="width: 300px;" v-model="application_place_form" placeholder="请输入加班地点..." :disabled="true"></el-input>
                    </div>
                    <!-- <div style="margin-top:5px">
                        <span>加班理由:</span>
                        <el-input autosize :rows="3" placeholder="请输入加班理由" type="textarea" v-model="application_context_form" style="width:300px" readonly></el-input>
                    </div> -->
                    
                </el-form> 
                    <span slot="footer" class="dialog-footer">
                        <el-button type="danger" @click="fnClose" style="width:90px;">关闭</el-button>
                        <!-- <el-button type="primary" @click="fnSave" style="width:90px;" v-show="insertShow">新增</el-button> -->
                        <el-button type="primary" @click="fnEdit" style="width:90px;" v-show="editShow" >修改</el-button>   
                    </span>
            </el-dialog>
        </div>
        <el-table
            ref="multipleTable"
            :data="applicationResultList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            border stripe size="mini">
            <el-table-column
                type="selection"
                >
            </el-table-column>
            <el-table-column prop="result_id" label="加班结果表主键id" width="10" v-if="false">

            </el-table-column>
            <el-table-column
                prop="user_name"
                label="用户名称"
                
                align="center">
            </el-table-column>
            <el-table-column
                prop="application_time"
                label="申请时间"
                
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="result_status"
                label="加班状态"
                
                :formatter="fnStatus"
                align="center">
            </el-table-column>
            <el-table-column
                prop="result_time_day"
                label="实际加班天数(/d)"
               
                align="center">
            </el-table-column>   
            <el-table-column
                prop="is_result_fee"
                label="是否产生加班费"
                
                :formatter="formatIsResultFee"
                align="center">
            </el-table-column>
            <el-table-column
                label="操作"
                
                align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="prepareEdit(scope.$index,scope.row)" icon="el-icon-edit" type="info">事后信息补录</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount" style="float:left">
            </el-pagination>
        </div>
         <div style="width:100px">     
            <el-button size="mini" @click="fnDel" icon="el-icon-delete" type="danger" v-if="applicationResultList.length>0" :disabled="multipleSelection.length==0">批量删除</el-button>
        </div>
    </div>
</div>
</template>
<script>
export default {
    mounted:function(){
        this.prepareQuery();
    },
    data(){
        return {
            row:'',
            workday:'',
            weekend:'',
            holiday:'',
            result_status_form:'',
            result_time_day:'',
            result_id:'',
            application_time_form:'',
            application_start_time_form:'',
            is_result_fee:'',
            result_time:'',
            userList:[],
            overtime_all_time_form:'',
            department_id_form:'',
            project_id_form:'',
            user_name_form:'',
            user_id_form:'',
            audit_level_id_form:'',
            audit_level:[],
            application_type_form:'',
            typeList:'',
            application_place_form:'',
            application_context_form:'',
            application_note_form:'',
            departmentList:'',
            editShow:false,
            dialogVisible:false,
            dialogTitle:'',
            //表格数据
            applicationResultList:[],
            //多选的数据
            multipleSelection:[],
            //用户姓名
            user_name:'',
            //加班状态
            result_status:'',
            //是否产生事后信息
            message_sign:'',
            //时间选择组件
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            typeList:[{
                    id:'0',
                    name:'工作日加班'  
                },
                {
                    id:'1',
                    name:'公休日加班'
                },{
                    id:'2',
                    name:'法定节假日加班'  
            }],
            //加班状态下拉选择框数据
            statusList:[{
                        id:'0',
                        name:'未开始加班'
                    },{
                        id:'1',
                        name:'加班中'
                    },{
                        id:'2',
                        name:'加班已结束'
                }],
            //事后信息下拉选择框数据
            signList:[{
                    id:'0',
                    name:'未产生事后信息'  
                },
                {
                    id:'1',
                    name:'产生事后信息'
                }],
            //分页
            //当前页码
            currentPage:1,
            //默认每页的数据量
            pageSize:10,
            //默认数据总量
            totalCount:1000,
            //查询的页码
            start:0,
            allStatus:[{
                id:'0',
                name:'否'
            },
            {
                id:'1',
                name:'是'
            }],
             allResultStatus:[{
                id:'1',
                name:'未结束'
            },
            {
                id:'2',
                name:'已结束'
            }],
            loading:false,
            formLoading:false,
            }  
        },
    watch: {
        workday:function(val){
            this.result_time_day = parseInt(this.workday)+parseInt(this.holiday)+parseInt(this.weekend);
        },
        holiday:function(val){
            this.result_time_day = parseInt(this.workday)+parseInt(this.holiday)+parseInt(this.weekend);
        },
        weekend:function(val){
            this.result_time_day = parseInt(this.workday)+parseInt(this.holiday)+parseInt(this.weekend);
        }
    },
    computed:{
        
    },
    methods:{
        //查询按钮点击事件
        prepareQuery(){
            this.fnQuery(this.currentPage,this.pageSize);
        },
        //查询加班结果列表方法
        fnQuery(currentPage,pageSize) {
            var _this = this;
            this.loading = true;
            this.postRequest("applicationResult/query",{
                user_name:this.user_name,
                result_status:this.result_status,
                message_sign:this.message_sign,
                currentPage:currentPage,
                pageSize:pageSize
            }).then(resp=> {
                this.loading = false;
                if (resp && resp.status == 200) {
                    var result = resp.data;
                    //赋值表格数据
                    _this.applicationResultList = result.pageData;
                    //赋值表格的分页的total属性
                    _this.totalCount = result.total;
                }
            })
        },
        //编辑打开弹窗方法
        prepareEdit(index,row){
            this.row=row
            this.is_result_fee=row.is_result_fee+'';
            this.result_status_form = row.result_status+'';
            this.result_time_day = row.result_time_day;
            this.user_id_form = row.user_id;
            this.result_time=[row.result_start_time,row.result_end_time];
            this.dialogVisible = true;
            var _this = this;
            //判定主键id是否为空，定向的显示标题和按钮
            this.formLoading = true;
            if(row.application_id!=null || row.application_id!= ""){
                this.insertShow = false;
                this.editShow = true;
                this.result_id=row.result_id
                this.dialogTitle = "编辑";
            }
            this.postRequest("/applicationResult/queryById",{
                application_id:row.application_id
            }).then(resp=>{
                this.formLoading = false;
                if(resp && resp.status == 200){
                    var result = resp.data;
                    var account_time;
                    if(result[0].account_time){
                        account_time = (result[0].account_time).split(',');
                        this.workday = account_time[0].substr(4);
                        this.holiday = account_time[1].substr(4);
                        this.weekend = account_time[2].substr(3);
                    }
                    
                    this.project_id_form = result[0].project_name;
                    this.department_id_form = result[0].name;
                    this.user_name_form = result[0].user_name;
                    this.audit_level_id_form = result[0].audit_level_id;
                    this.application_type_form = result[0].application_type+'';
                    this.application_context_form = result[0].application_context;
                    this.application_note_form = result[0].application_note;
                    this.application_place_form = result[0].application_place;
                    this.application_start_time_form = result[0].application_all_time;
                    this.application_time_form = result[0].application_time;
                    this.result_time = [result[0].application_start_time,result[0].application_end_time];
                }
            })
        },
        //编辑保存方法
        fnEdit(){
            var _this = this;
             if(this.result_time.length==0){
                
                this.$message({
                    type:'warning',
                    message:'请选择实际加班时间'
                })
                return
            }
            if(this.result_status_form==''){
                 this.$message({
                    type:'warning',
                    message:'请选择加班是否结束'
                })
                return
            }
            if(this.result_time_day==''){
                this.$message({
                    type:'warning',
                    message:'请输入实际加班时间'
                })
                return
            }
            if(this.is_result_fee==''){
                
                this.$message({
                    type:'warn',
                    message:'请选择是否产生费用'
                })
                return 
            }
            var start = new Date(this.result_time[0])
            var end = new Date(this.result_time[1])
            var day = parseInt(Math.abs((end-start)/1000/24/60/60))
            var trueDay = parseInt(this.workday)+parseInt(this.weekend)+parseInt(this.holiday)
            if(trueDay>day+1){
                this.$message({
                    type:'warning',
                    message:'填写时间大于选择时间'
                })
                return
            }
            this.formLoading = true;
            this.postRequest("/applicationResult/applicationResultEdit",{
                application_id:this.row.application_id,
                result_id:this.result_id,
                account_time:'工作日:'+this.workday+',节假日:'+this.holiday+',周末:'+this.weekend,
                result_start_time:this.createdTimeFormart(this.result_time[0]),
                result_end_time:this.createdTimeFormart(this.result_time[1]),
                is_result_fee:this.is_result_fee,
                result_time_day:this.result_time_day,
                result_status:this.result_status_form,
                user_id:this.user_id_form
            }).then(resp=>{
                this.formLoading = false;
                if(resp && resp.status == 200){
                    
                    this.$message({
                        type: resp.data.status,
                        message: resp.data.msg
                    });
                    if(resp.data.status!='success'){
                        return
                    }
                }
                //此处如果写到下面，则会并行执行，返回的数据为新增之前的数据，查询不到最新的数据
                this.prepareQuery();
                this.fnClose();
            });
        },
        //点击表格索引触发事件,用于删除时赋值给传入后台的数据
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        //删除按钮触发事件方法
        fnDel(){
            var _this = this;
            
            var delarr = [];
            const length = this.multipleSelection.length;
            //赋值批量删除或单个删除的id值
            for(let i = 0;i < length;i++){
                    delarr.push(this.multipleSelection[i].result_id);
                }
            this.$confirm('是否确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.doDel(delarr);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //删除执行方法
        doDel(ids){
            var _this = this;
            this.loading = true;
            this.postRequest("/applicationResult/delApplicationResult",{
                ids : ids,
            }).then(resp=>{
                this.loading = false;
                if(resp && resp.status == 200){
                     this.$message({
                        type: 'info',
                        message: '删除成功'
                    });
                }
                _this.prepareQuery();
            });
        },
        //重置按钮方法
        fnReset(){
            this.user_name = '';
            this.result_status = '';
            this.message_sign = '';
            this.prepareQuery();
        },
        //分页
        //每页显示数据量变更
        handleSizeChange: function(val) {
            this.pageSize = val;
            this.prepareQuery(this.currentPage,this.pageSize);
        },

        //页码变更
        handleCurrentChange: function(val) {
            this.currentPage = val;
            this.prepareQuery(this.currentPage,this.pageSize);
        }, 
        //格式化加班状态
        fnStatus(row,column){
            if(row.result_status == 0){
                return "已删除";
            }else if(row.result_status == 1){
                return "加班中"
            }else if(row.result_status == 2){
                return "加班结束"
            }else{
                return "未开始加班"
            }
        },
        //格式化加班车费信息
        formatIsResultFee(row,column){
            if(row.is_result_fee == 0 ){
                return "否";
            }else{
                return "是";
            }
        },
        //关闭按钮触发事件
        fnClose(){
            this.dialogVisible = false;
            this.application_id_form = '';
            this.department_id_form = '';
            this.project_id_form ='';
            this.user_id_form = '';
            this.user_name_form = '';
            this.audit_level_id_form = '';
            this.audit_level_name_form = '';
            this.application_start_time_form = '';
            this.application_end_time_form = '';
            this.overtime_all_time_form = '';
            this.application_type_form = '';
            this.application_type_name_form = '';
            this.application_place_form = '';
            this.application_context_form = '';
            this.application_note_form = '';
            this.result_time_day='';
            this.result_time='';
            this.is_result_fee='';
            this.result_status_form='';
        },
        //关闭回调方法
        closeDialog(){
            this.fnClose();
        },
        //时间格式转换
        createdTimeFormart(time){
            let date = new Date(Date.parse(time));
            let y = date.getFullYear();
            let m = date.getMonth()+1;
            m=(m<10?'0'+m:m);
            let d = (date.getDate()<10?'0'+date.getDate():date.getDate());
            let h = (date.getHours()<10?'0'+date.getHours():date.getHours());
            let mi = (date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes());
            let s = (date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds());
            return y+'-'+m+'-'+d+' '+h+':'+mi+':'+s;
        },
    },
}
</script>

